<template>
  <WaterfallVue :colums="colums" :gaps="2" />
</template>

<script setup>
import { ref } from 'vue';
import WaterfallVue from '@/components/Watfall';
var colums = ref(4);
window.addEventListener('resize', () => {
  if (getClient().width > 768) {
    colums.value = 4;
  }
  if (getClient().width < 768 && getClient().width > 648) {
    colums.value = 3;
  }
  if (getClient().width < 648) {
    colums.value = 2;
  }
});

function getClient() {
  return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  };
}
</script>
